<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>换届选举</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="/js/jquery2.1.4.min.js"></script>
    <script src="/js/jquery.qrcode.min.js"></script>
    <script src="/js/assets/amazeui.widgets.helper.min.js"></script>
    <script src="/js/assets/amazeui.widgets.helper.js"></script>
    <script src="/js/assets/amazeui.ie8polyfill.min.js"></script>
    <script src="/js/assets/amazeui.ie8polyfill.js"></script>
    <script src="/js/assets/amazeui.min.js"></script>
    <script src="/js/assets/amazeui.js"></script>
    <script src="/js/mui.min.js"></script>
    <script src="/js/bootstrap-treeview.js"></script>


    <link rel="stylesheet" type="text/css" href="/css/assets/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="/css/assets/amazeui.css">
    <link rel="stylesheet" type="text/css" href="/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">

    <style>
        .leaders{
            margin:5px;
        }

        .branchName{
            text-align: center;
            width: 100%;
        }
        .detail{

        }
        .leaderName{
            background:gray;
            width: 100%;
            display: flex;
        }
        .am-header-default{
            background: rgb(197,2,2);
        }
        .am-header .am-header-title{
            margin:13px 30%;
            position: absolute;
        }
        #bg {
            width: 100%;
            height: 100%;
            background-color: #000;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.3;
            display: none;
        }
        #middlePopover1{
            height: 200px;
            /* top: 135px; */
            left: -200%;
            position: relative;
        }
        .leader{
            margin-right: 2px;
            border: none;
            background: none;
            height: 20px;
            vertical-align: middle;
            padding: 0;
            text-align: right;
        }
        button, input:not([type="radio"]):not([type="checkbox"]), select{
            vertical-align: middle;
            padding: 0;
            height: 20px;
            background: none;
            border: none;
            margin: 0;
        }
    </style>
</head>

<body>
    <header data-am-widget="header"
            class="am-header am-header-default">
        <h1 class="am-header-title">
                现届党组织
        </h1>

        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">

                <i class="am-header-icon am-icon-bars"></i>
            </a>
        </div>
    </header>
<form action="saveElection" method="post">
    <div th:text="${branch.getFd_BranchName()}" class="branchName">

        </div>
        <div class="leaders" th:each="leader,leaders:${leader}">
            <div class="am-g">
            <div th:if="${leaders.index} eq 0">
                职务名称：书记
            </div>
            <div th:if="${leaders.index} eq 1">
                职务名称：副书记
            </div>
            <div th:if="${leaders.index} eq 2">
                职务名称：委员
            </div>
                <div class="leaderName">
                    <div class="am-u-sm-6">改选换届前</div>
                    <div class="am-u-sm-6">
                        <input class="leader" type="text" th:value="${leader}" />
                    </div>

                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-4">改选换届后</div>
                <div class="am-u-sm-4">

                    <input type="hidden" th:id="'members'+${leaders.index+1}"  hidden="hidden">
                    <input type="hidden" th:id="'loginIds'+${leaders.index+1}" th:name="'VLeaderId'+${leaders.index+1}" hidden="hidden">
                    <input type="text" th:id="'memberName'+${leaders.index+1}" th:name="'VLeaderName'+${leaders.index+1}"  class="am-form-field">
                </div>
                <div class="am-u-sm-4">
                    <div th:id="'middlePopover'+${leaders.index+1}" class="mui-popover" onchange="change2()">
                        <div class="mui-popover-arrow"></div>
                        <div class="mui-scroll-wrapper">
                            <div class="mui-scroll" th:id="'treeview-searchable'+${leaders.index+1}">
                            </div>
                        </div>

                    </div>
                    <a  onclick="return change2()" th:href="'#middlePopover'+${leaders.index+1}" target="_blank" class="am-btn am-btn-danger">请选择</a>
                    <!--<a class="am-btn am-btn-danger" href="javascript:void(0);" th:onclick="'treeView('+${leaders.index+1}+')'">请选择</a>-->
                </div>
            </div>
        </div>
        <div class="detail">
            <div class="am-g">
                <div class="am-u-sm-6">审批人</div>
                <div class="am-u-sm-6" th:text="${leaderChangeLog[1]}">

                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-6">拟任组织人数</div>
                <div class="am-u-sm-6" th:text="${branch.getFd_PartyCount()}"></div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-6">现届党组织当选日期</div>
                <input id="lastTime" th:value="${leaderChangeLog[0]}" name="lastTime" hidden="hidden" type="text">
                <div class="am-u-sm-6" th:text="${leaderChangeLog[0]}">

                </div>
            </div>
        </div>

        <div class="am-form-group">
            <label for="type">改选换届类型</label>
            <select id="type" name="type">
                <option value="0">换届</option>
                <option value="1">改选</option>
            </select>
            <span class="am-form-caret"></span>
        </div>
        <input type="submit" value="确认提交" class="am-btn am-btn-danger" style="width: 100%;height: 40px;">
</form>
    </body>
</html>

<script>
    var json;
    mui('.mui-scroll-wrapper').scroll();
    loadParts();
    function loadParts(){
        console.log("组织多选!")
        mui.ajax({
            url:"getBranchMembersForTree",
            dataType:'text',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            async:false,
            success:function(data){
                var jsondata=JSON.parse(data);
                json=jsondata;
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                console.log(type);
            }
        });
    }

    function treeView(idNum){
        var $searchableTree = $('#treeview-searchable'+idNum).treeview({
            data: json,
            showCheckbox: true,

            onNodeChecked: function (event, node) {
                checkNode(node,idNum);
            },
            onNodeUnchecked: function (event, node) {
                uncheckNode(node,idNum);
            }
        });
    }

    function checkNode(node,idNum){
        if (node.nodes) {
            for (x in node.nodes) {
                $('#treeview-searchable'+idNum).treeview('checkNode', [node.nodes[x].nodeId, { silent: true }]);
                checkNode(node.nodes[x]);
            }
        }
        if(node.fd_BranchID == 0 && node.fd_LoginID != undefined){
            var memberName="#memberName"+idNum;
            var loginIds = $("#loginIds"+idNum).val();
            var memberNameValue=$(memberName).val();
            loginIds += node.fd_LoginID+",";
            memberNameValue+=node.text+",";
            $("#loginIds"+idNum).val(loginIds);
            $(memberName).val(memberNameValue);
        }
    }

    function uncheckNode(node,idNum){
        if (node.nodes) {
            for (x in node.nodes) {
                $('#treeview-searchable1').treeview('uncheckNode', [node.nodes[x].nodeId, { silent: true }]);
                uncheckNode(node.nodes[x]);
            }
        }
        if(node.fd_BranchID == 0 && node.fd_LoginID != undefined){
            var memberName="#memberName"+idNum;
            var loginIds = $("#loginIds"+idNum).val();
            var memberNameValue=$(memberName).val();
            loginIds = loginIds.replace(node.fd_LoginID+",","");
            memberNameValue=memberNameValue.replace(node.text+",","");
            $("#loginIds"+idNum).val(loginIds);
            $(memberName).val(memberNameValue);
        }
    }



    function middleNone(idNum){
        var middlePopover1=document.getElementById("middlePopover"+idNum);
        middlePopover1.style.display="none";
        var s = document.getElementById("bg");
        s.style.display = "none";
    }
    function change2(idNum){
        window.setInterval(function d(){
            document.getElementById("middlePopover"+idNum).style="height: 200px;\n" +
                "    /* top: 135px; */\n" +
                "    left: -200%;\n" +
                "    position: relative;";
        },10);
    }

    for(var i=1;i<=3;i++){
        treeView(i);
        change2(i);
    }

    function submit(){
        var memberName1=document.getElementById("memberName1").value;
        console.log(memberName1);
        var memberName2=document.getElementById("memberName2").value;
        var memberName3=document.getElementById("memberName3").value;
        var loginIds1=document.getElementById("loginIds1").value;
        var loginIds3=document.getElementById("loginIds3").value;
        var loginIds2=document.getElementById("loginIds2").value;
        var lastTime=document.getElementById("lastTime").value;
        var type=document.getElementById("type").selectedIndex;
        $.ajax({
            type:'post',
            url:"saveElection",
            async:false,
            date:{
                VLeaderName1:memberName1,
                VLeaderName2:memberName2,
                VLeaderName3:memberName3,
                VLeaderId1:loginIds1,
                VLeaderId2:loginIds2,
                VLeaderId3:loginIds3,
                lastTime:lastTime,
                type:type
            },
            dataType : "text",//数据类型

            success:function(){
                window.location.href="turnNowLeader";
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                alert("出错");
                console.log(type);
            }
        });
    }
</script>
</html>